iT邦幫忙

2021 iThome 鐵人賽

DAY 18
1
Modern Web

前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue系列 第 18

Day_18 : 讓 Vite 來開啟你的Vue 之 toRef & toRefs

  • 分享至 

  • xImage
  •  

Hi Dai Gei Ho~ 我是Winnie~

今天文章要來說的是 toRef 與 toRefs ,不知道大家記不記得在 前面的文章中 我們有說過 Composition API 中的 props 與 reactive 無法使用 直接透過ES6解構語法 來自動解構,因為這樣會導致 資料失去原本的響應功能

示意如下:

<script>
import { reactive } from 'vue'
export default{
  setup(){
    const setCount= reactive({
      count:1,
      add: ()=> setCount.count ++
    })
    
    return {
      ...setCount
    }
  }
}
</script>

預覽:

有一句話是這麼說 :

你不動 我不動,你一動,我還是不想動 - By 我自己

所以 針對這個問題, Vue 提供了 ## toRef 與 toRefs 兩個函式來進行 解構後同時保有響應功能 的處理。

首先我們先從 toRef開始說起:

toRef

toRef 會將 原本 響應式物件內的一個屬性抽離出來 包裝成一個 ref 的值,因為與原本對象 是連接的,所以修改時,原本的值也會跟著變動。

什麼意思?讓我們來看看以下範例:


<template>
   <div class="wrap">
     <div class="container">
       <h1>使用 toRef 測試</h1>
       {{userName}}
       <input type="text" v-model="userName">
     </div>
   </div>
</template>

<script>
import { reactive,toRef,onUpdated } from 'vue'
export default{
 setup(){
 
   const userInfo= reactive({
     name:'Winnie',
     age: 24
   })

   const userName = toRef(userInfo, 'name') //將響應物件裡的屬性抽離出來 使用

   onUpdated(()=>{
     console.log('toRef:',userName.value)  
     console.log('元物件:',userInfo.name) // 元物件內的name
   })
   return {
     userName //回傳 name屬性 給 template使用
   }
 }
}
</script>

預覽:

從上我們可以看到 userName 是 從 userInfo 中的 name 屬性抽離出來的,當傳出去給 template使用並更動它時,除了 userName的值更新了 從 console.log 也可以看userInfo.name 的值也跟著跟新了。

toRefs

toRefs 會將原本 響應式物件 轉為 普通響應式物件。其中在toRefs後的物件與值 是引用關係 且 每個值都轉為 ref 來達到 內部值 保有響應性。

...略
 setup(){
   const setCount= reactive({
     count:1,
     add: ()=> setCount.count ++
   })
   // const { count, add } = toRefs(info) 也可以這樣來解構,可以選擇要用的就好了。
   
   return {
     ...toRefs(setCount)
   }
 }

預覽:

小結:

今天想來小結以下,截止到這週有關 ref 的文章 ,目前最常用到有關ref的 API 應該就是這些了,如果大家還對其他 ref相關 的API用法 有興趣,歡迎大家 到 官方文件 來細細品嚐,

以上是今天的文章,如有問題歡迎大家多多指教,謝謝。


上一篇
Day_17 : 讓 Vite 來開啟你的Vue 之 取得 模板元素 ref
下一篇
Day_19 : 讓 Vite 來開啟你的Vue 之 計算屬性 Computed
系列文
前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Yen 小焰
iT邦新手 5 級 ‧ 2022-05-11 12:45:54

您好 我有點小疑問 但我不確定原因
一開始測試toRef的時候
就已經保有資料的響應功能了

import { onBeforeUpdate, onUpdated, onMounted, onUnmounted, ref, reactive, toRef, toRefs } from 'vue'

export default {
    setup(props){
    
        const setCount = reactive({
            count : 1,
            plus : ()=> setCount.count ++
        }); 
        
        return { setCount }
    
    }
}
art iT邦新手 5 級 ‧ 2022-11-28 11:09:38 檢舉
<template>
  <div>{{ count }}</div>
  <button @click="plus">Click Me</button>
</template>

<script>
import { reactive, toRefs } from "vue";

export default {
  setup() {
    const setCount = reactive({
      count: 1,
      plus: () => {
        setCount.count++;
        console.log(setCount.count); //1
      },
    });

    // 用 toRefs將 setCount 包裝起來再解構
    const { count, plus } = toRefs(setCount);
    // 直接解構:網頁上的 count 不會響應變化
    // const { count, plus } = setCount;
    return {
      count,
      plus,
    };
  },
};
</script>

我要留言

立即登入留言